<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div class="text-center">
            <div class="avatar-wrapper">
              <img
                :src="avatar ? avatar : '/avatar.png'"
                class="user-avatar"
              >
            </div>
            <h2>{{ userInfo.name }}</h2>
            <div>{{ userInfo.username }}</div>
            <div class="user-role" v-if="userInfo.roles && userInfo.roles.length > 0">
              <span v-for="(role, index) in userInfo.roles" :key="role.id">
                {{ role.name }}
                <span v-if="index < userInfo.roles.length - 1">,</span>
              </span>
            </div>
          </div>
          <div class="user-info">
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="email" /> 邮箱
                <div class="pull-right">{{ userInfo.email || '未设置' }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" /> 手机号
                <div class="pull-right">{{ userInfo.phone || '未设置' }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="dept" /> 部门
                <div class="pull-right">{{ userInfo.department || '未设置' }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="position" /> 职位
                <div class="pull-right">{{ userInfo.position || '未设置' }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" /> 最后登录时间
                <div class="pull-right">{{ userInfo.last_login_time || '未登录' }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <user-info :user="userInfo" @updateProfile="updateUserInfo" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="password">
              <reset-pwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/auth'
import userInfo from './userInfo'
import resetPwd from './resetPwd'

export default {
  name: 'Profile',
  components: { userInfo, resetPwd },
  data() {
    return {
      activeTab: 'userinfo',
      userInfo: {},
      avatar: undefined
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      getUserInfo().then(response => {
        this.userInfo = response.data.user
        // 获取头像
        // 如果有头像URL则使用，否则使用默认头像
        this.avatar = this.userInfo.avatar || ''
      })
    },
    updateUserInfo() {
      // 更新用户信息后，刷新页面数据
      this.getUser()
    }
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  padding-top: 15px;
}
.box-card {
  margin-bottom: 10px;
}
.avatar-wrapper {
  margin: 10px auto 20px;
  position: relative;
  width: 100px;
  height: 100px;
  .user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.text-center {
  text-align: center;
}
.list-group-striped {
  & > li {
    padding: 12px 15px;
    border-bottom: 1px solid #e7eaec;
    &:last-child {
      border-bottom: none;
    }
  }
}
.list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.user-role {
  margin-top: 5px;
  color: #999;
}
</style> 